<template>
  <div class="echart" id="from"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
  mounted() {
    var chartDom = document.getElementById("from");
    var myChart = echarts.init(chartDom);
    var option = {
      title: {
        text: "站点用户访问来源",
        subtext: "虚拟数据",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          data: [
            { value: 1048, name: "搜索引擎" },
            { value: 735, name: "直接访问" },
            { value: 580, name: "邮件营销" },
            { value: 484, name: "联盟广告" },
            { value: 300, name: "视频广告" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    option && myChart.setOption(option);
  }
};
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: 600px;
  background: #fff;
  padding: 80px 20px;
  border-radius: 3px;
}
</style>
